<template>
  <div class="just-div">
    <!--navbar欄-->
    <div class="navbar">
      <van-nav-bar fixed title="智慧商城" />
    </div>
    <!--搜索框-->
    <div class="search-div">
      <router-link to="/search">
        <van-search
          background="#F1F1F3"
          class="search-input"
          placeholder="搜索你要找的商品"
          shape="round"
        />
      </router-link>
    </div>
    <!--輪播圖-->
    <div class="swipe-div">
      <van-swipe :autoplay="3000" class="my-swipe" indicator-color="#43A5B5">
        <van-swipe-item v-for="item in swipeList" :key="item.imgUrl">
          <img :src="item.imgUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--輪播文字-->
    <div class="notice-bar">
      <van-notice-bar
        background="#525252"
        color="#fff"
        left-icon="volume-o"
        scrollable
        text="智慧商城2.0全新上线，更多新品等你来选~"
      />
    </div>
    <!--5×2宮格-->
    <div class="grid-div">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in navList"
          :key="item.imgUrl"
          :icon="item.imgUrl"
          :text="item.text"
        />
      </van-grid>
    </div>
    <!--主會場banner-->
    <div class="ZHCbanner">
      <img :src="this.ZHCbanner" alt="" class="ZHCimg" />
    </div>
    <!--猜你喜歡-->
    <div class="guessLike">
      <p>——猜你喜歡——</p>
      <goodsItem
        v-for="item in proList"
        :key="item.goods_id"
        :item="item"
      ></goodsItem>
    </div>
    <!--  底部空白臺高視窗-->
    <div class="last">
      <p></p>
    </div>
  </div>
</template>
<script>
import goodsItem from "@/components/goodsItem.vue";
import { getIndexDetail } from "@/api/home";

export default {
  name: "indexIndex",
  components: {
    goodsItem,
  },
  data() {
    return {
      ZHCbanner: "",
      swipeList: [], //輪播
      navList: [], //導航
      proList: [], //商品
    };
  },
  computed: {},
  methods: {},
  async created() {
    const {
      data: {
        data: { pageData },
      },
    } = await getIndexDetail();
    this.swipeList = pageData.items[1].data;
    this.navList = pageData.items[3].data;
    this.ZHCbanner = pageData.items[4].data[0].imgUrl;
    this.proList = pageData.items[6].data;
  },
};
</script>
<style lang="less">
.just-div {
  width: 100%;

  .navbar {
    .van-nav-bar__content {
      background-color: #cf2300;

      .van-nav-bar__title {
        color: #fff;
      }
    }
  }

  .search-div {
    margin-top: 47px;

    .search-input {
      background-color: #fff;
    }

    .van-search__content {
      background-color: #fff;
    }
  }

  .swipe-div {
    .my-swipe {
      img {
        width: 100%;
      }
    }
  }

  .notice-bar {
    margin-top: -4px;
  }

  .grid-div {
    display: flex;

    .van-icon__image {
      width: 50px;
      height: 50px;
    }
  }

  .ZHCbanner {
    width: 100%;

    .ZHCimg {
      width: 100%;
    }
  }

  .guessLike {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
    }
  }

  .last {
    height: 50px;
  }
}
</style>
